<template>
<header-comp/>
<main-nav/>
<div class="sub-container">
<loading-comp v-show="loadingStatus" />
<div v-show="!loadingStatus" id="micro-container">子应用内容</div>
</div>
<FooterComp/>
</template>
<script setup>
import {ref} from 'vue'
import HeaderComp from "./components/HeaderComp";
import MainNav from './components/MainNav';
import LoadingComp from './components/LoadingComp';
import FooterComp from './components/FooterComp';
import {loading} from './store'
const loadingStatus = ref(loading.loadingStatus)

</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 100%;
  height: 100%;

}
html, body{
  width: 100%;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.sub-container{
  min-height: 100%;
  position: relative;
}
#micro-container{
  min-height: 100%;
  width: 100%;
}

</style>
